<!-- 基础设置 -> 账套设置 -> 编码规则 -->
<template>
    <div class="set-wrapper">
        <a-table v-if="isShow" class="a-base-table wh100 border-none codeing-text" :columns="ruleColumns" :pagination="false" :data-source="ruleDataSource" :loading="loading" :scroll="scroll" bordered>
        </a-table>
        <!-- <a-button v-if="!isGuideModel"
      type="primary"
      class="btn"
      size="large"
      @click="saveRule"
      icon="save"
      >保存</a-button
    > -->
    </div>
</template>
<script>
import {
    list as ListGradeRule,
    save as SaveGradeRule
} from "@/api/erp/gradeRule";

export default {
    data () {
        return {
            isShow: true,
            currentAccount: {},
            //编码规则数据
            ruleDataSource: [
                { project: "科目编码级次", maxLength: "40" },
                { project: "物料分类编码级次", maxLength: "12" },
                { project: "结算方式编码级次", maxLength: "3" },
                { project: "货位编码级次", maxLength: "20" },
                { project: "收发类别编码级次", maxLength: "5" }
            ],
            // 编码规则标题
            ruleColumns: [
                {
                    title: "项目",
                    width: 150,
                    dataIndex: "title"
                },
                {
                    title: "最大长度",
                    dataIndex: "maxLen",
                    width: 80,
                    customRender: (text, record) => {
                        const key = "maxLen";
                        const change = e => {
                            record[key] = e.target.value;
                        };
                        return (
                            <a-input value={record[key]} onChange={change} disabled></a-input>
                        );
                    }
                },
                {
                    title: "第1级",
                    dataIndex: "level1",
                    width: 50,
                    customRender: (text, record) => {
                        return (
                            <a-input
                                value={(record.level && record.level[0]) || ""}
                                onKeyup={e => this.onChangeRuleLevel(e, record, 0)}
                            ></a-input>
                        );
                    }
                },
                {
                    title: "第2级",
                    dataIndex: "level2",
                    width: 50,
                    customRender: (text, record) => {
                        return (
                            <a-input
                                value={(record.level && record.level[1]) || ""}
                                onKeyup={e => this.onChangeRuleLevel(e, record, 1)}
                            ></a-input>
                        );
                    }
                },
                {
                    title: "第3级",
                    dataIndex: "level3",
                    width: 50,
                    customRender: (text, record) => {
                        return (
                            <a-input
                                value={(record.level && record.level[2]) || ""}
                                onKeyup={e => this.onChangeRuleLevel(e, record, 2)}
                            ></a-input>
                        );
                    }
                },
                {
                    title: "第4级",
                    dataIndex: "level4",
                    width: 50,
                    customRender: (text, record) => {
                        return (
                            <a-input
                                value={(record.level && record.level[3]) || ""}
                                onKeyup={e => this.onChangeRuleLevel(e, record, 3)}
                            ></a-input>
                        );
                    }
                },
                {
                    title: "第5级",
                    dataIndex: "level5",
                    width: 50,
                    customRender: (text, record) => {
                        return (
                            <a-input
                                value={(record.level && record.level[4]) || ""}
                                onKeyup={e => this.onChangeRuleLevel(e, record, 4)}
                            ></a-input>
                        );
                    }
                },
                {
                    title: "第6级",
                    dataIndex: "level6",
                    width: 50,
                    customRender: (text, record) => {
                        return (
                            <a-input
                                value={(record.level && record.level[5]) || ""}
                                onKeyup={e => this.onChangeRuleLevel(e, record, 5)}
                            ></a-input>
                        );
                    }
                },
                {
                    title: "第7级",
                    dataIndex: "level7",
                    width: 50,
                    customRender: (text, record) => {
                        return (
                            <a-input
                                value={(record.level && record.level[6]) || ""}
                                onKeyup={e => this.onChangeRuleLevel(e, record, 6)}
                            ></a-input>
                        );
                    }
                },
                {
                    title: "第8级",
                    dataIndex: "level8",
                    width: 50,
                    customRender: (text, record) => {
                        return (
                            <a-input
                                value={(record.level && record.level[7]) || ""}
                                onKeyup={e => this.onChangeRuleLevel(e, record, 7)}
                            ></a-input>
                        );
                    }
                },
                {
                    title: "第9级",
                    dataIndex: "level9",
                    width: 50,
                    customRender: (text, record) => {
                        return (
                            <a-input
                                value={(record.level && record.level[8]) || ""}
                                onKeyup={e => this.onChangeRuleLevel(e, record, 8)}
                            ></a-input>
                        );
                    }
                }
            ]
        };
    },
    // created() {
    //     this.loadRuleList();
    // },
    methods: {
        //加载 编码规则
        loadRuleList () {
            const { currentAccount } = this;
            //加载数据 若传入参数1则加载第一页的内容
            var params = { accountId: currentAccount.id }; //查询条件
            this.loading = true;
            ListGradeRule(params).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.ruleDataSource = this.getRuleData(res.data);
                } else {
                    // this.$message.warning(res.message);
                }
                this.loading = false;
            });
        },
        //处理 编码规则数据
        getRuleData (bbb) {
            let data = bbb.filter(item => item.title == '科目编码级次' || item.title == '结算方式编码级次');
            for (let j = 0; j < data.length; j++) {
                let level = data[j].codingRule.split("");
                data[j].level = level;
            }
            console.log(data);
            return data;
        },
        //修改 编码规则 级次数据
        onChangeRuleLevel (e, record, index) {
            //获取最大编码长度
            let maxLength = parseInt(record.maxLen);
            let level = record.level;
            let levelLength = level.length;

            e.target.value = e.target.value.replace(/^(0+)|[^\d]+/g, "");
            let value = e.target.value;
            console.log("onChangeRuleLevel", value, record, index);
            //1.是否越级 操作
            if (index > levelLength) {
                setTimeout(() => {
                    e.target.value = record.level[index] || "";
                }, 100);
                return false;
            }

            //如果删除 当前级次 
            if (!value) {
                record.level.splice(index, 1); //删除
                return false;
            }

            //非法 的 index值
            if (!index && 0 != index) {
                setTimeout(() => {
                    e.target.value = record.level[index] || "";
                }, 500);
                return false;
            }
            //转换 成整数
            value = parseInt(value);

            if (!level) {
                //校验 是否 越级填写数字
                if (index > 0) {
                    setTimeout(() => {
                        e.target.value = record.level[index] || "";
                    }, 100);
                    return false;
                }
                if (value > 9) {
                    this.$message.error("单级最大长度不可以超过9");
                    setTimeout(() => {
                        e.target.value = record.level[index] || "";
                    }, 500);
                    return false;
                } else {
                    record.level = [value];
                }
            } else {
                //校验 是否 越级填写数字
                if (index > levelLength) {
                    setTimeout(() => {
                        e.target.value = record.level[index] || "";
                    }, 100);
                    return false;
                }
                if (value > 9) {
                    this.$message.error("单级最大长度不可以超过9");
                    setTimeout(() => {
                        e.target.value = record.level[index] || "";
                    }, 500);
                    return false;
                }
                let total = value;
                level.forEach &&
                    level.forEach((item, i) => {
                        if (item && i != index) {
                            total += parseInt(item);
                        }
                    });
                console.log("total > maxLength", total, maxLength, total > maxLength);
                if (total > maxLength) {
                    this.$message.error("超过最大长度");
                    setTimeout(() => {
                        e.target.value = record.level[index] || "";
                    }, 500);
                    return false;
                } else {
                    record.level[index] = value;
                }
                this.isShow = false;
                this.$nextTick(function () {
                    this.isShow = true;
                })
            }
        },
        //保存 编码规则数据
        saveRule () {
            let data = Object.assign([], this.ruleDataSource);
            // console.log(this.ruleDataSource);
            for (let i = 0; i < data.length; i++) {
                data[i].codingRule = data[i].level.filter(item => item).join("");
                // delete data[i].level;
            }
            // console.log(data);
            SaveGradeRule(data).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.$message.success("保存成功");
                    this.$emit("codingSetok", 5);
                    // this.loadRuleList();
                } else {
                    // this.$message.warning(res.message);
                }
            });
        }
    }
};
</script>
<style lang="less">
    .a-base-table {
        margin: 0 auto;
        // width: 89%;
    }
    .set-wrapper {
        width: 100%;
        text-align: center;
        .btn {
            margin: 10px auto;
        }
    }
    .codeing-text .ant-table-column-title {
        // writing-mode: vertical-lr;
        // letter-spacing: 4px;
        display: inline-block;
        width: 15px;
    }
    .codeing-text .ant-table-tbody > tr > td {
        padding: 0 2px !important;
    }

    .codeing-text .ant-input {
        // border:1px solid #ccc;
        text-align: center;
    }
</style>